<template>
    <div class="basic-info card">
        <div class="title">联系方式</div>
        <div class="form-box">
            <el-form :model="formInline" label-width="100px">
                <el-row :gutter="20">
                    <el-col :span="12" :xs="24">
                        <el-form-item label="手机号码">
                            <el-input v-model="formInline.phonenumber" placeholder="请输入手机号码" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" :xs="24">
                        <el-form-item label="常驻省市">
                            <el-select v-model="formInline.residentCity" placeholder="请选择常驻省市" clearable>
                                <el-option label="天津" value="0" />
                                <el-option label="杭州" value="1" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24" :xs="24">
                        <el-form-item label="详细地址">
                            <el-input type="textarea" v-model="formInline.address" placeholder="请输入详细地址" clearable />
                        </el-form-item>
                    </el-col>

                </el-row>
            </el-form>
            <div class="text-center">
                <div style="width: 164px;"></div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { useVModel } from '@vueuse/core'
const props = defineProps({
    modelValue: {
        type: Object,
        default: () => ({})
    }
})
const emit = defineEmits(['update:modelValue']);
const formInline = useVModel(props, 'modelValue', emit)
</script>
<style scoped lang="scss">
.basic-info {
    padding: 19px 16px;

    :deep(.el-form) {
        .el-date-editor {
            --el-date-editor-width: 100%;
        }

        .el-select {
            width: 100%;
        }
    }

    .form-box {
        display: flex;
        column-gap: 20px;
    }
}
</style>